<template>
    <div class="detail">
        <DetailNavBar class="detail-nav" ref="nav" @titleClick="titleClick"></DetailNavBar>
        <Scroll class="content" ref="scroll" @scroll="contentScroll" :probe-type="3">
            <DetailSwiper :top-images="topImages"></DetailSwiper>
            <DetailBaseInfo :goods="goods"></DetailBaseInfo>
            <DetailShopInfo :shop="shop"></DetailShopInfo>
            <DetailGoodsInfo :detailInfo="detailInfo" @imageLoad="imageLoad"></DetailGoodsInfo>
            <DetailParamInfo :paramInfo="paramInfo" ref="param"></DetailParamInfo>
            <DetailCommentInfo :commentInfo="commentInfo" ref="comment"></DetailCommentInfo>
            <GoodsList :goods="recommends" ref="recommend"></GoodsList>
        </Scroll>
        <DetailBottomBar @addCart="addToCart"></DetailBottomBar>
        <BackTop @click.native="backClick" v-show="isShowBackTop"></BackTop>
        <!-- <Toast message="QUAN"></Toast> -->
    </div>
</template>
<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'

// import Toast from 'components/common/toast/Toast'
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import BackTop from 'components/content/backTop/BackTop'

// 混入
import {itemListenerMixin, backTopMinin} from '../../common/mixin'

// 常量
import {BACKTOP_DISTANCE} from '../../common/const'

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from 'network/detail'

// 映射
import {mapActions} from 'vuex'
export default {
    name:'Detail',
    components:{
        DetailNavBar,DetailSwiper,DetailGoodsInfo,DetailShopInfo,DetailBaseInfo,DetailParamInfo,DetailCommentInfo,DetailBottomBar,
        Scroll,GoodsList,BackTop,//Toast
    },
    mixins:[itemListenerMixin,backTopMinin],
    data() {
        return {
            iid:this.$route.params.iid,//传过来的id
            topImages:[],//顶部图片
            goods:{},//商品信息
            shop:{},//店铺信息
            detailInfo:{},//商品详情
            paramInfo:{},//参数信息
            commentInfo:{},//评论信息
            recommends:[],//推荐商品
            themeToYs:[],//参数，评论等离顶部的距离
            // getThemeTopY:null,//参数，评论等离顶部的距离的函数
            currentIndex:0,//tab
        }
    },
    created() {
        // 根据用户传入的id请求详情数据
        getDetail(this.iid).then(res=>{
            // console.log(res)
            const data=res.data.result
            console.log(data)
            // 1 获取顶部轮播图
            this.topImages=data.itemInfo.topImages
            // console.log(this.topImages)
            // 2 获取商品信息
            this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            // console.log(this.goods)
            // 3 获取店铺信息
            this.shop=new Shop(data.shopInfo)
            // console.log(this.shop)
            // 4 商品详情
            this.detailInfo=data.detailInfo
            // 5 参数信息
            this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
            // console.log(this.paramInfo)
            // 6 评论信息
            if(data.rate.cRate!==0){
                this.commentInfo=data.rate.list[0]
            }
            // console.log(this.commentInfo)

            // 用这个方法可以得到渲染完的themeToYs,里面dom可能渲染完了，但是图片可能还没有
            // this.$nextTick(()=>{
            //     // this.themeToYs=[]
            //     this.themeToYs.push(0)
            //     this.themeToYs.push(this.$refs.param.$el.offsetTop)
            //     this.themeToYs.push(this.$refs.comment.$el.offsetTop)
            //     this.themeToYs.push(this.$refs.recommend.$el.offsetTop)
            //     console.log(this.themeToYs)
            // })
        })

        // 获取推荐商品
        this.getRecommend()

        // 另一种方法  防抖
        // this.getThemeTopY=this.debounce(()=>{
        //     this.themeToYs=[]
        //     this.themeToYs.push(0)
        //     this.themeToYs.push(this.$refs.param.$el.offsetTop)
        //     this.themeToYs.push(this.$refs.comment.$el.offsetTop)
        //     this.themeToYs.push(this.$refs.recommend.$el.offsetTop)
        //     this.themeToYs.push(Number.MAX_VALUE)
        //     console.log(this.themeToYs)
        // },200)
    },
    mounted() {
        // 用了混入
    },
    destroyed() {
        // 离开的时候取消首页的图片加载监听
        this.$bus.$off('itemImageLoad',this.itemImgListener)
    },
    methods: {
        // 映射
        ...mapActions(['addCart']),
        // 商品详情图片加载完毕
        imageLoad(){
            this.$refs.scroll.refresh()
            // 加载图片那里已经做过防抖了，所以这里不需要
            this.getThemeTopY()
        },
        //参数，评论等离顶部的距离的函数
        getThemeTopY(){
            this.themeToYs=[]
            this.themeToYs.push(0)
            this.themeToYs.push(this.$refs.param.$el.offsetTop)
            this.themeToYs.push(this.$refs.comment.$el.offsetTop)
            this.themeToYs.push(this.$refs.recommend.$el.offsetTop)
            this.themeToYs.push(Number.MAX_VALUE)
            console.log(this.themeToYs)
        },
        // tab切换
        titleClick(index){
            // console.log(index)
            this.$refs.scroll.scrollTo(0,-this.themeToYs[index],200)
        },
        // better scroll的滚动事件
        contentScroll(position){

            if(-position.y>BACKTOP_DISTANCE)this.isShowBackTop=true
            else this.isShowBackTop=false

            // console.log(position)
            const positionY=-position.y
            let length=this.themeToYs.length
            for(let i=0;i<length-1;i++){
                let iPos=this.themeToYs[i]
                if(this.currentIndex!==i&&(positionY>=iPos&&positionY<this.themeToYs[i+1])){
                    this.currentIndex=i
                    this.$refs.nav.currentIndex=this.currentIndex
                }
            }
        },
        // 获取推荐商品
        getRecommend(){
            getRecommend().then(res=>{
                // console.log(res)
                this.recommends=res.data.data.list
                // console.log(this.recommends)
            })
        },
        // 防抖函数
        debounce(func,delay){
            let timer=null
            return function(...args){
                if(timer) clearTimeout(timer)
                timer=setTimeout(()=>{
                    func.apply(this,args)
                },delay)
            }
        },
        // 加入购物车
        addToCart(){
            // console.log("asdas")
            const obj={}
            // 商品信息
            obj.iid=this.iid
            obj.imgURL=this.topImages[0]
            obj.title=this.goods.title
            obj.desc=this.goods.desc
            obj.newPrice=this.goods.realPrice
            // 添加到Store
            // this.$store.dispatch('addCart',obj).then(res=>{
            //     console.log(res)
            // })
            // 使用映射的方式
            this.addCart(obj).then(res=>{
                // console.log(res)
                this.$toast.show(res,1500)
            })
        },
    },
}
</script>
<style scoped>
.detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
    overflow: hidden;
}
.detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
}
.content {
    height: calc(100% - 44px - 52px); 
}
</style>